<template>
    <div class="center">
        <div class="box">
            <!-- 导航栏 -->
            <div class="nav pointer" @click="back">
                <img src="@/assets/images/layout/header/back.png" class="back-icon">
                <div>{{ name }}</div>
            </div>
            <!-- tabs -->
            <BaseCardTab v-model:active="activeIndex" :list="tabList" @handleChangeTab="handleChangeTab" />
            <!-- 路由占位 -->
            <router-view />
        </div>
    </div>
</template>

<script setup lang="js">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter()

const name = ref("")

// 当前tab 索引
const activeIndex = ref(-1)

// tabs数据
const tabList = [
    { name: "报表中心", url: "/center/sheet" },
    { name: "指标中心", url: "/center/target" },
    { name: "报告中心", url: "/center/report" },
]

// 监听路由
watch(route, (newValue) => {
    activeIndex.value = tabList.findIndex(item => item.url == newValue.path)
    name.value = tabList[activeIndex.value].name
}, {
    immediate: true
});

// 切换tab
const handleChangeTab = (item) => {
    router.replace(item.url)
}

// 返回上一页
const back = () => {
    router.go(-1)
}

</script>
<style scoped lang="scss">
.center {
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
    background-color: #0A1622;

    .box {
        padding: vh(20) vw(28) vh(24) vw(40);

        .nav {
            width: 100%;
            height: vh(52);
            background: linear-gradient(90deg, #183844 0%, #173743 100%);
            border-radius: vw(4);
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: vw(22);
            color: #FFFFFF;
            margin-bottom: vh(44);

            .back-icon {
                width: vw(24);
                margin-left: vw(24);
                margin-right: vw(9);
            }
        }
    }
}
</style>